<template>
	<view class="modal_wrap">
		<view class="top_nav">
			<view class="top_nav_item" @click="toHome('threeHome')">椅骨包</view>
			<view class="top_nav_item" @click="toHome('oldHome')">上拣空</view>
		</view>
		<view class="click-box1" @click="showModal('呼叫头枕')"></view>
		<view class="click-box2" @click="showModal('货架翻面')"></view>
		<view class="click-box3" @click="showModal('退空料架')"></view>
		<view class="cu-modal" :class="modalVisible?'show':''">
			<view class="cu-dialog" style="width: 80vw;">
				<view class="cu-bar bg-white justify-end" style="height: 8vh;">
					<view class="content" style="font-size: 3vh;">{{title}}</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red" style="font-size: 4vh;"></text>
					</view>
				</view>
				<view style="height: 26vh; overflow-y: auto; padding: 2vh 2vw;" class="btn-wrap">
					<view class="sm_title text-left" style="width: 100%;">
						选择上料位:
					</view>
					<view class="box-btn" :class="el === check2 ? 'bg-blue' : 'bg-grey'"
						v-for="(el, i) in upMalLocation" :key="i" @click="checkOut('2', el)">
						{{el}}
					</view>
				</view>
				<view style="height: 26vh; overflow-y: auto; padding: 2vh 2vw;" class="btn-wrap"
					v-if="title === '呼叫头枕'">
					<view class="sm_title text-left" style="width: 100%;">
						选择物料:
					</view>
					<view class="box-btn" :class="el === check1 ? 'bg-blue' : 'bg-grey'" v-for="(el, i) in positionList"
						:key="i" @click="checkOut('1', el)">
						{{el}}
					</view>
				</view>

				<view class="cu-bar bg-white justify-end" style="height: 15vh;font-size: 3vh;">
					<view class="action">
						<view v-if="title === '呼叫头枕'" class=" bg-green send_btn" @click="sendTask1('1')">头枕退零</view>
						<view v-if="title === '呼叫头枕'" class=" bg-green send_btn" @click="sendTask1('0')">呼叫头枕</view>
						<view v-if="title === '退空料架'" class=" bg-green send_btn" @click="sendTask2">退空料架</view>
						<view v-if="title === '货架翻面'" class=" bg-green send_btn" @click="sendTask3">货架翻面</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalVisible: false,
				positionList: [],
				upMalLocation: [],
				check1: '',
				check2: '',
				title: ''
			}
		},
		onLoad() {

		},
		methods: {
			toHome(url) {
				uni.navigateTo({
					url: '/pages/index/' + url
				})
			},
			showModal(tit) {
				const that = this
				that.$api.postAPI('/task/getlistdatabytype?type=4', {}).then(res => {
					that.upMalLocation = res.data
					if (tit !== '呼叫头枕') {
						this.modalVisible = true
						this.title = tit
						return
					}
					that.$api.postAPI('/task/getlistdatabytype?type=5', {}).then(res => {
						that.positionList = res.data
						this.modalVisible = true
						this.title = tit
					})
				})
			},
			hideModal() {
				this.modalVisible = false
				this.check1 = ''
				this.check2 = ''
			},
			checkOut(flag, el) {
				if (flag === '1') {
					if (this.check1 === el) {
						this.check1 = ''
						return
					}
					this.check1 = el

				}
				if (flag === '2') {
					if (this.check2 === el) {
						this.check2 = ''
						return
					}
					this.check2 = el
				}

			},
			sendTask1(str) {

				let that = this
				if (!this.check2) {
					uni.showModal({
						title: '提示',
						content: '请先选择上料位！'
					})
					return
				}
				if (!this.check1) {
					uni.showModal({
						title: '提示',
						content: '请先选择物料！'
					})
					return
				}

				uni.showModal({
					title: '提示',
					content: '确认是否发送任务?',
					success: res => {
						if (res.cancel) return
						uni.showLoading({
							title: '提交中!',
							mask: true
						})
						that.$api.getAPI(
								`/task/AssembleCallPartTask?PartCode=${that.check1}&EndLoc=${that.check2}&IsRemainder=${str}`,
								'')
							.then(
								res => {
									uni.hideLoading()
									if (!res.success) {
										uni.showModal({
											title: '提示',
											content: '任务发送失败:' + res.data
										})
									} else {
										uni.showToast({
											title: '任务发送成功',
										})
									}
								})
					}
				})
			},
			sendTask3() {
				let that = this
				if (!this.check2) {
					uni.showModal({
						title: '提示',
						content: '请先选择上料位?',
					})
					return
				}
				uni.showModal({
					title: '提示',
					content: '确认是否下发任务?',
					success: res => {
						if (res.cancel) return
						uni.showLoading({
							title: '提交中!',
							mask: true
						})
						that.$api.getAPI(`/task/assemblefilptask?StartLoc=${this.check2}`, '').then(
							res => {
								uni.hideLoading()
								if (!res.success) {
									uni.showModal({
										title: '提示',
										content: '货架翻面失败:' + res.data
									})
								} else {
									uni.showToast({
										title: '货架翻面成功',
									})
								}
							})
					}
				})
			},
			sendTask2() {
				let that = this
				if (!this.check2) {
					uni.showModal({
						title: '提示',
						content: '请先选择上料位?',
					})
					return
				}
				uni.showModal({
					title: '提示',
					content: '确认是否退空料架?',
					success: res => {
						if (res.cancel) return
						uni.showLoading({
							title: '提交中!',
							mask: true
						})
						that.$api.getAPI(`/task/AssembleRetrunEmptyBox?StartLoc=${this.check2}`, '').then(
							res => {
								uni.hideLoading()
								if (!res.success) {
									uni.showModal({
										title: '提示',
										content: '退空料架失败:' + res.data
									})
								} else {
									uni.showToast({
										title: '退空料架成功',
									})
								}
							})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.modal_wrap {
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		background-image: url(../../static/new_bg.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: relative;
	}

	.click-box1 {
		position: absolute;
		right: 44.11vw;
		top: 20.19vh;
		width: 19.74vw;
		height: 59.44vh;
	}

	.click-box2 {
		position: absolute;
		position: absolute;
		right: 23.13vw;
		top: 20.19vh;
		width: 19.74vw;
		height: 59.44vh;
	}

	.click-box3 {
		position: absolute;
		right: 1.93vw;
		top: 20.19vh;
		width: 19.74vw;
		height: 59.44vh;
		/* background-color: red; opacity: 0.5; */
		;
	}

	.btn-wrap {
		display: flex;
		flex-wrap: wrap;
		/* justify-content: space-between; */
		align-items: center;
	}

	.box-btn {
		/* width: 12vw; */
		padding: 0 2vw;
		height: 6.16vh;
		border-radius: 1vh;
		font-size: 2.98vh;
		color: #fff;
		/* background-color: #004ea1; */
		font-weight: bolder;
		line-height: 6.16vh;
		margin-left: 3vw;
	}

	.sm_title {
		font-size: 2.98vh;
		font-weight: bolder;
	}

	.send_btn {
		width: 17vw;
		height: 9.16vh;
		margin-left: 8.22vw;
		border-radius: 1vh;
		font-size: 3.98vh;
		color: #004ea1;
		background-color: #bcd500;
		font-weight: bolder;
		line-height: 9.16vh;
	}
</style>